<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>then()</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }

      #box {
        width: 300px;
        height: 300px;
        background-color: red;
        transition: all 0.5s;
      }
    </style>
  </head>
  <body>
    <div id="box"></div>

    <script>
      // 1.什么时候执行
      // pending->fulfilled 时，执行 then 的第一个回调函数
      // pending->rejected 时，执行 then 的第二个回调函数

      // 2.执行后的返回值
      // then 方法执行后返回一个新的 Promise 对象
      // const p = new Promise((resolve, reject) => {
      //   resolve();
      //   // reject();
      // });
      // const p2 = p
      //   .then(
      //     () => {},
      //     () => {}
      //   )
      //   .then()
      //   .then();

      // console.log(p, p2, p === p2);

      // 3.then 方法返回的 Promise 对象的状态改变
      // const p = new Promise((resolve, reject) => {
      //   // resolve();
      //   reject();
      // });
      // p.then(
      //   () => {
      //     // console.log('success');
      //   },
      //   () => {
      //     console.log('err');

      //     // 在 then 的回调函数中，return 后面的东西，会用 Promise 包装一下
      //     // return undefined;
      //     // 等价于
      //     // return new Promise(resolve => {
      //     //   resolve(undefined);
      //     // });

      //     return 123;
      //     // return new Promise(resolve => {
      //     //   resolve(123);
      //     // });

      //     // 默认返回的永远都是成功状态的 Promise 对象
      //     // return new Promise((resolve, reject) => {
      //     //   reject('reason');
      //     // });
      //   }
      // )
      //   .then(
      //     data => {
      //       console.log('success2', data);

      //       // return undefined;
      //       return new Promise(resolve => {
      //         resolve(undefined);
      //       });
      //     },
      //     err => {
      //       console.log('err2', err);
      //     }
      //   )
      //   .then(
      //     data => {
      //       console.log('success3', data);
      //     },
      //     err => {
      //       console.log('err3', err);
      //     }
      //   );

      // 4.使用 Promise 解决回调地狱
      // 运动
      const move = (el, { x = 0, y = 0 } = {}, end = () => {}) => {
        el.style.transform = `translate3d(${x}px, ${y}px, 0)`;

        el.addEventListener(
          'transitionend',
          () => {
            end();
          },
          false
        );
      };
      const boxEl = document.getElementById('box');

      const movePromise = (el, point) => {
        return new Promise(resolve => {
          move(el, point, () => {
            resolve();
          });
        });
      };

      document.addEventListener(
        'click',
        () => {
          movePromise(boxEl, { x: 150 })
            .then(() => {
              return movePromise(boxEl, { x: 0, y: 0 });
            })
            .then(() => {
              return movePromise(boxEl, { x: 150, y: 150 });
            })
            .then(() => {
              return movePromise(boxEl, { y: 150 });
            });
        },
        false
      );

      // document.addEventListener(
      //   'click',
      //   () => {
      //     move(boxEl, { x: 150 }, () => {
      //       move(boxEl, { x: 150, y: 150 }, () => {
      //         move(boxEl, { y: 150 }, () => {
      //           move(boxEl, { x: 0, y: 0 });
      //         });
      //       });
      //     });
      //   },
      //   false
      // );
    </script>
  </body>
</html>
